<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.css" rel="stylesheet" />
		<link href="../css/customize.css" rel="stylesheet" />
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left font-black"></a>
			<h1 class="mui-title">大棚信息</h1>
		</header>
		<div class="mui-content">
			<div class="mui-content-padded" id="container">
				<div id="list">
				</div>

				<button class="mui-btn mui-btn-green mui-btn-block" id="add" style="margin-top: 10px;">
					添加
				</button>
			</div>
		</div>
		<script src="../js/mui.js"></script>
		<script src="../js/request.js"></script>
		<script src="../js/storage.js"></script>
		<script type="text/javascript">
			// 生命全局变量
			let baseUrl = localStorage.getItem("ip");
			//获取当前登录用户
			let user = userCache.getUser();

			mui.init();

			mui.plusReady(function() {
				loadlist();
			})

			window.addEventListener('refresh', function(event) {
				loadlist();
			});

			mui("body").on("tap", "#add", function(event) {
				mui.openWindow({
					url: 'greenhouseAdd.html',
					id: 'greenhouseAdd.html',
					createNew: false,
					show: {
						autoShow: true,
					}
				});
			})

			//获取大棚列表
			function loadlist() {
				let data = {}
				request.get('/system/greenhouse/list', data, (data) => {
					//提交成功回调
					console.log('调用服务端获取大棚信息成功');
					let list = data.rows;
					renderList(list);
					//关闭等待框
					plus.nativeUI.closeWaiting();
					//显示当前页面
					mui.currentWebview.show();
				}, (error, thrown) => {
					//发生错误时，回调
					console.error('调用服务端获取大棚信息失败', error);
				})
			}

			//动态添加列表
			function renderList(list) {
				if (!list) {
					return
				}
				let parent = document.getElementById('list');
				parent.innerHTML = '';
				list.forEach(row => {
					let li = document.createElement('div');
					li.addEventListener('tap', function(event) {
						getGreenhouseDetail(row.id);
					});
					// li.innerHTML = `<a href="javascript:;" class="mui-navigate-right">
					// 			<img class="mui-media-object mui-pull-left" src="${row.picture?(baseUrl+row.picture):'../image/logo.png'}">
					// 			<div class="mui-media-body">
					// 				${row.name}
					// 				<p class="mui-ellipsis">位置：${row.location}</p>
					// 			</div>
					// 		</a>`;
					li.innerHTML = `<div class="card-item">
											<img src="${row.picture?(baseUrl+row.picture):'../image/logo.png'}" alt="" class="card-item-image">
											<div class="card-item-info">
												<h2 class="card-item-info-title">${row.name}</h2>
												<div class="address-section">
													<p class="card-item-info-subtitle">${row.location}</p>
													<span class="mui-icon mui-icon-arrowright arrow-icon"></span>
												</div>
											</div>
									</div>`;
					parent.append(li);
				})
			}
			//显示大棚信息
			function getGreenhouseDetail(id) {
				mui.openWindow({
					url: 'greenhouseAdd.html',
					id: 'greenhouseAdd.html',
					createNew: false,
					show: {
						autoShow: true,
					},
					extras: {
						greenhouseId: id
					}
				});
			}
		</script>
	</body>

</html>